<template>
    <div class="home-grid">
    <van-grid :column-num="5" square :gutter="5">
    <van-grid-item v-for="list in menulist" :key="list">
    <van-image :src="list.url" />
    <span>{{ list.text }}</span>
    </van-grid-item>
    </van-grid>
    </div>
   </template>
   <script setup>
   import menu1 from '../assets/Grid/智慧办公.png'
   import menu2 from '../assets/Grid/智能家居.png'
   import menu3 from '../assets/Grid/鸿蒙智行.png'
   import menu4 from '../assets/Grid/华为手机.png'
   import menu5 from '../assets/Grid/影音娱乐.png'
   import menu6 from '../assets/Grid/企业商用.png'
   import menu7 from '../assets/Grid/配件.png'
   import menu8 from '../assets/Grid/全屋智能.png'
   import menu9 from '../assets/Grid/她之选.png'
   import menu10 from '../assets/Grid/以旧换新.png'
   const menulist = [
    { text: '智慧办公', url: menu1 },
    { text: '智能家居', url: menu2 },
    { text: '鸿蒙智行', url: menu3 },
    { text: '华为手机', url: menu4 },
    { text: '影音娱乐', url: menu5 },
    { text: '企业商用', url: menu6 },
    { text: '配件', url: menu7 },
    { text: '全屋智能', url: menu8 },
    { text: '她之选', url: menu9 },
    { text: '以旧换新', url: menu10 }
]
</script>
<style lang="less" scoped> 
.home-grid {
 .van-image {
 width: 55%;
 }
 span {
 font-size: 12px;
 } }
</style>